<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-12-03 11:20:20
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-12-29 14:54:39
-->
<template>
  <div class="sample-tutorial">
    <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
      <gc-worksheet :dataSource="dataSource" :autoGenerateColumns="autoGenerateColumns">
        <gc-column :dataField="'Film'" :width="160"></gc-column>
        <gc-column :dataField="'Genre'" :width="70"></gc-column>
        <gc-column :dataField="'Lead Studio'" :width="90"></gc-column>
        <gc-column :dataField="'Audience Score %'" :width="110"></gc-column>
        <gc-column :dataField="'Profitability'" :width="80"></gc-column>
        <gc-column :dataField="'Rating'"></gc-column>
        <gc-column :dataField="'Worldwide Gross'" :width="110"></gc-column>
        <gc-column :dataField="'Year'"></gc-column>
      </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>

<script>
  import Vue from "vue";
  import '@grapecity/spread-sheets-resources-zh';
  GC.Spread.Common.CultureManager.culture("zh-cn");
  import "@grapecity/spread-sheets-vue";
  import GC from "@grapecity/spread-sheets";
  import getData from "./data.json";

  export default {
    name: 'spreadJs',
    data() {
      return {
        autoGenerateColumns: false,
        spread: null
      }
    },
    methods: {
      initSpread: function (spread) {
        this.spread = spread;
      }
    },
    computed: {
      dataSource() {
        return getData;
      }
    }
  }
</script>
<style>
  .sample-tutorial {
    position: relative;
    /* height: 100%; */
    height: 800px;
    overflow: hidden;
  }

  .sample-spreadsheets {
    width: 100%;
    height: 100%;
  }

  body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>